<template>
  <div>
    <h3>
      您需要登录才能继续访问
      <span @click="close" class="close">×</span>
    </h3>
    <div class="login_wrapper">
      <div class="login_img">
        <img src="http://localhost:8080/img/psc.jpg" alt />
        <p>七仔</p>
      </div>

      <div class="login_cons">
        <van-field v-model="tel" type="tel" label="手机号" placeholder="请输入手机号" />
        <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <template #button>
            <van-button size="small" type="primary">发送验证码</van-button>
          </template>
        </van-field>

        <button v-show="islogin" @click="onLogin" class="login_btn">登录</button>
        <button v-show="isnologin" @click="CloseLogin" class="login_btn">退出登录</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tel: "",
      sms: "",
      islogin: true,
      isnologin: false
    };
  },
  created() {},
  methods: {
    close() {
      window.history.back();
    },
    onLogin() {
      var status = true;
      localStorage.status = JSON.stringify(status);
      this.$router.push("/cart");
      this.islogin = false;
      this.isnologin = true;
    },
    CloseLogin() {
      this.isnologin = false;
      this.islogin = true;
    }
  }
};
</script>

<style scoped>
h3 {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  text-indent: 20px;
  background-color: rgb(235, 232, 232);
}
.login_wrapper {
  width: 100%;
}
.login_img {
  width: 100%;
  display: flex;
  justify-content: start;
  border-bottom: 1px solid lightgrey;
  box-sizing: border-box;
  padding: 10px 10px;
}
.login_wrapper img {
  width: 100px;
  border-radius: 50%;
}
.login_img p {
  font-size: 20px;
  margin: 10px 20px;
}
.login_cons {
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 30px;
  text-align: center;
}
.login_btn {
  width: 200px;
  height: 35px;
  background-color: #0076ff;
  border: none;
  color: #fff;
  margin-top: 30px;
  border-radius: 5px;
  letter-spacing: 5px;
}
.close {
  font-size: 24px;
}
</style>